<template>
    <div>
        <!-- {{container}} -->
        <Row>
            <div style="float:left;margin-top:5px;margin-right:10px"  >
                <Button type="primary" style="margin-right:10px" @click="btn_refresh">刷新</Button>
                <Button type="primary" @click="btn_stop_timer">停止定时器</Button>
            </div>
            <!-- 查询区域 -->
            <div style="margin-top:5px;width:700px;margin-right:20px">
                <div style="float:left">
                    <Input v-model="pod_name" disabled />
                </div>
                <div style="width:300px;float:right">
                    <span>选择容器: </span>
                    <Select v-model="container"  style="width: 200px" @on-change="container_changer">
                        <template v-for="c in container_list" >
                            <Option  :key="c" :value="c" v-if="c==container"  selected>{{ c }}</Option>
                            <Option :key="c" :value="c" v-else>{{ c }} </Option>
                        </template>
                    </Select>
                </div>

            </div>
        </Row>
        <div style="height: 80%; margin-top:20px; background: #002833;">
                <MyTerminal style="height:680px;overflow:auto"  :terminal="terminal" ref="xterm">

                </MyTerminal>
        </div>
    </div>
</template>

<script>

import { get_container_name ,get_pod_log} from '@/api'
import { k8s_cluster_post } from '@/api/http'

import MyTerminal from '@/lib/myTerminal';

export default {
    components:{
        MyTerminal
    },
    data() {
        return {
            data: "",

            oldLen: 0,
            // 容器列表
            container_list:[],
            container: '',
            pod_name: '',
            namespace: '',          
            terminal: {
                pid: 1,
                name: "terminal",
                cols: 40,
                rows: 100,
            },
        }
    },
    methods: {

        btn_stop_timer(){
            clearInterval(this.timer)
        },
        container_changer(){
            this.term.clear()
            this.oldLen = 0
            this.refresh()
        },
        get_params(){
            let query = this.$router.currentRoute.query
            let name = query.name

            let namespace = query.namespace
            console.log("namespace:",namespace,"name:",name)            
            this.pod_name =  name
            this.namespace = namespace

            let data = {"namespace":namespace,"name":name}
            k8s_cluster_post(get_container_name,data,undefined,undefined).then(response =>{
                let data = response.data
                console.log("获取容其名称:",data)
                this.container_list = data
                this.container = this.container_list[0]
            })
        },
        refresh(){

            let data = {"namespace":this.namespace,"name":this.pod_name,"container":this.container}
            console.log("data:",JSON.stringify(data))
            k8s_cluster_post(get_pod_log,data,undefined,undefined).then(response=>{
                let data = response.data

                let totalLen = data.length
                let newLen = totalLen-this.oldLen
                console.log("total:",totalLen,"old:",this.oldLen,"new:",newLen)
                let newData = data.slice(this.oldLen,totalLen)
                if(newLen > 0){
                    console.log("追加日志")
                    setTimeout(() =>{
                        // this.term.writeln(newData)
                        this.$refs.xterm.term.writeln(newData)

                    },100); 
                }
                this.oldLen = totalLen
                // this.$refs.xterm.fit()
            }).catch(error=>{
                console.log(error)
            })     
        },
        btn_refresh() {
            this.refresh()
            
        },

    },

    mounted: function() {
        // terminal初始化
        this.get_params()

        setTimeout(() =>{
            this.refresh();
        },200); 
        this.timer = setInterval(this.refresh, 10000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },

}
</script>
<style>

</style>